<template>
  <div class="exchangeContent" style="color: #fff;">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="exchangeMain">
      <el-card style="background: black;">
        <el-form ref="formRef">
          <el-form-item>
            <el-select v-model="exchangeValueLeft" placeholder="请选择货币" @change="changeLeftExchange" :no-data-text="'无数据'" style="width: 130px;height: 60px;margin-right: 5px;">
              <el-option
                v-for="(item, index) in exchange"
                :key="index"
                :label="item.code + '-' + item.name"
                :value="(item.code as string)"
                style="padding-left: 10px;padding-top: 8px;"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="moneyLeft"
              placeholder="请输入金额"
              type="number"
              maxlength="20"
              style="width: 150px;border-left: none"
            ></el-input>
            <el-tooltip class="box-item" effect="light" content="点击进行转换" placement="top"
              >
                <el-icon style="font-size: 25px;margin: 0 25px;cursor: pointer;" @click="transverter">
                  <component is="Switch"></component>
                </el-icon>
            </el-tooltip>
            <el-select v-model="exchangeValueRight" placeholder="请选择货币" @change="changeRightExchange" :no-data-text="'无数据'" style="width: 130px;height: 60px;margin-right: 5px;">
              <el-option
                v-for="(item, index) in exchange"
                :key="index"
                :label="item.code + '-' + item.name"
                :value="(item.code as string)"
                style="padding-left: 10px;padding-top: 8px;"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="moneyRight"
              placeholder="请输入金额"
              type="number"
              maxlength="20"
              style="width: 150px;border-left: none;"
              disabled
            ></el-input>

          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { exchangeList } from '@/utils/plugins'
import request from '@/utils/request'

const formRef = ref<FormInstance>()
const route = useRoute()
const router = useRouter()

const exchangeValueLeft = ref<any>('')
const exchangeValueRight = ref<any>('')
const moneyLeft = ref<any>('')
const moneyRight = ref<any>('')
const exchange = exchangeList()

const changeLeftExchange = (code: string) => {
  exchangeValueLeft.value = code
}

const changeRightExchange = (code: string) => {
  exchangeValueRight.value = code
}

const reqExchangeInfo = (data: any) => request.post<any, any>(`https://route.showapi.com/105-31?showapi_appid=1505398&showapi_sign=38a5f6fb1abe4355bc2f0d5435372138&data=0424&fromCode=${exchangeValueLeft.value}&toCode=${exchangeValueRight.value}&money=${moneyLeft.value.toString()}`, data)
const transverter = () => {
  if (exchangeValueLeft.value == '' || exchangeValueRight.value == '') {
    ElMessage({
      type: 'warning',
      message: '请选择要转换的货币'
    })
  } else if (moneyLeft.value == '') {
    ElMessage({
      type: 'warning',
      message: '请输入要转换的金额'
    })
  } else {
    reqExchangeInfo({
      // showapi_appid: '1505398', //这里需要改成自己的appid
      // showapi_sign: '38a5f6fb1abe4355bc2f0d5435372138',  //这里需要改成自己的应用的密钥secret
      fromCode: exchangeValueLeft.value,
      toCode: exchangeValueRight.value,
      money: moneyLeft.value.toString()
    }).then(res => {
      console.log('res', res)
      if (res.showapi_res_body.ret_code == 0) {
        moneyRight.value = res.showapi_res_body.money
      } else {
        ElMessage({
          type: 'error',
          message: res.showapi_res_error || res.showapi_res_body.remark
        })
      }
    })
  }
}

onMounted(() => {
  
})

</script>

<style lang="scss" scoped>
.exchangeContent {
  width: 100%;
  .el-card {
    border-radius: $base-card-border-radius;
  }
  .exchangeMain {
    padding: 30px;
    .el-card {
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    margin: 50px 25px;

    .el-input {
      border-left: 0px
    }
    .el-select {
      border-radius: 5px;
      border: none;
    }
    :deep(.el-input__wrapper) {
      width: 130px;
      height: 60px;
      border: none;
    }

  }

}
</style>